<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Factorship - Industrial Category Bootstrap Responsive Template | Landing</title>
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,600&display=swap" rel="stylesheet">
    <!-- Template CSS -->
    <link rel="stylesheet" href="assets/css/style-liberty.css">
</head>

<body>
    <!--/Header-->
    <header id="site-header" class="fixed-top">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light stroke py-lg-0">
                <h1><a class="navbar-brand" href="index.html">
                        <span class="sub-color">Factor</span>ship
                    </a></h1>
                <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
                    <span class="navbar-toggler-icon fa icon-close fa-times"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarScroll">
                    <ul class="navbar-nav mx-lg-auto my-2 my-lg-0 navbar-nav-scroll">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scroll" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scroll" href="#services">Services</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#Pages" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Sections <span class="fa fa-angle-down ms-1"></span>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item scroll" href="#progress">Progress</a></li>
                                <li><a class="dropdown-item pt-2 scroll" href="#team">Team</a></li>
                                <li><a class="dropdown-item scroll" href="#gallery">Gallery</a></li>
                                <li><a class="dropdown-item scroll" href="#join">Join Us</a></li>
                                <li><a class="dropdown-item scroll" href="#testimonials">Clients</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scroll" href="#contact">Contact</a>
                        </li>
                    </ul>
                    <!--/search-->
                    <button id="trigger-overlay" class="searchw3-icon me-xl-4 me-lg-3" type="button"><i class="fas fa-search"></i></button>
                    <!-- open/close -->
                    <div class="overlay overlay-slidedown">
                        <button type="button" class="overlay-close"><i class="fas fa-times"></i></button>
                        <nav class="w3l-formhny">
                            <form action="#" method="GET" class="d-sm-flex search-header">
                                <input class="form-control me-2" type="search" placeholder="Search here..." aria-label="Search" required>
                                <button class="btn btn-style btn-secondary me-lg-3" type="submit">Search</button>
                            </form>
                        </nav>
                    </div>
                    <!--//search-->
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="mobile-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
                <!-- //toggle switch for light and dark theme -->
            </nav>
        </div>
    </header>
    <!--//Header-->
    <!--/Banner-Start-->
    <!-- main-slider -->
    <section class="w3l-main-slider banner-slider" id="home">
        <div class="owl-one owl-carousel owl-theme">
            <div class="item">
                <div class="slider-info banner-view banner-top1">
                    <div class="container">
                        <div class="banner-info header-hero-19">
                            <p class="w3hny-tag">Quality With Integrity</p>
                            <h3 class="title-hero-19">The facility of applied intelligence.</h3>
                            <p class="w3ban-para">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo. <span class="w3-xtrap">Ultrices in ligula,semper at tempufddfel.</span> </p>
                            <a href="about.html" class="btn btn-style btn-primary mt-sm-5 mt-4">Read More <i class="fas fa-angle-double-right ms-2"></i></a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="slider-info banner-view banner-top2">
                    <div class="container">
                        <div class="banner-info header-hero-19">

                            <p class="w3hny-tag">Simply certified.</p>
                            <h3 class="title-hero-19">Reliable engineering takes many forms</h3>
                            <p class="w3ban-para">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo. <span class="w3-xtrap">Ultrices in ligula,semper at tempufddfel.</span> </p>
                            <a href="about.html" class="btn btn-style btn-primary mt-sm-5 mt-4">Read More <i class="fas fa-angle-double-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="slider-info banner-view banner-top3">
                    <div class="container">
                        <div class="banner-info header-hero-19">
                            <p class="w3hny-tag">Quality With Integrity</p>
                            <h3 class="title-hero-19">The facility of applied intelligence.</h3>
                            <p class="w3ban-para">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo. <span class="w3-xtrap">Ultrices in ligula,semper at tempufddfel.</span> </p>
                            <a href="about.html" class="btn btn-style btn-primary mt-sm-5 mt-4">Read More <i class="fas fa-angle-double-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="slider-info banner-view banner-top4">
                    <div class="container">
                        <div class="banner-info header-hero-19">
                            <p class="w3hny-tag">Simply certified.</p>
                            <h3 class="title-hero-19">Reliable engineering takes many forms</h3>
                            <p class="w3ban-para">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo. <span class="w3-xtrap">Ultrices in ligula,semper at tempufddfel.</span> </p>
                            <a href="about.html" class="btn btn-style btn-primary mt-sm-5 mt-4">Read More <i class="fas fa-angle-double-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w3l-stats-section stats-con mt-5">
            <div class="stats_info counter_grid ps-0">
                <p class="counter">3500 </p>
                <h3>Factories</h3>
            </div>
            <div class="stats_info counter_grid">
                <p class="counter">4360</p>
                <h3>Projects</h3>
            </div>

        </div>

    </section>
    <!-- //main-slider -->
    <!--/grids-->
    <section class="w3l-grids-3 py-5" id="about">
        <div class="container py-md-5 py-3">
            <div class="bottom-ab-grids align-items-center">
                <div class="w3ab-left-top">
                    <h6 class="title-subw3hny mb-1">Our Info</h6>
                    <h3 class="title-w3l mb-2">We are not your regular design agency we take the time to go further</h3>
                    <p class="my-3 mb-5 px-lg-5"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                        Nulla mollis dapibus nunc, ut rhoncus
                        turpis sodales quis. Integer sit amet mattis quam.</p>

                    <!-- /home-page-video-popup-->
                    <div class="w3l-index5 mt-3" id="video">
                        <div class="position-relative">
                            <a href="#small-dialog" class="popup-with-zoom-anim play-view text-center position-absolute">
                                <span class="video-play-icon">
                                    <span class="fa fa-play"></span>
                                </span>
                            </a>
                            <!-- dialog itself, mfp-hide class is required to make dialog hidden -->
                            <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
                                <iframe src="#" sandbox="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                            </div>
                        </div>
                        <!-- //home-page-video-popup-->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//grids-->

    <!--/w3-grids-->
    <section class="w3l-passion-mid-sec home-phny py-5">
        <div class="container py-md-5 py-3">
            <div class="container">
                <div class="row w3l-passion-mid-grids">
                    <div class="col-lg-6 passion-grid-item-info pe-lg-5 mb-lg-0 mb-5">
                        <h6 class="title-subw3hny mb-1">Welcome</h6>
                        <h3 class="title-w3l mb-4">We Help Build On Past & Prepare
                            For Your Future.</h3>
                        <p class="mt-3 pe-lg-5">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo, ultrices in
                            ligula. Semper at tempufddfel.Lorem ipsum dolor sit, amet consectetur elit. Earum mollitia
                            cum ex ipsam autem!earum sequi amet.</p>

                    </div>
                    <div class="col-lg-6 w3hny-passion-item">
                        <div class="row">
                            <div class="col-6 passion-grid-item-pic">
                                <img src="assets/images/ab1.jpg" alt="" class="img-fluid radius-image">
                            </div>
                            <div class="col-6 passion-grid-item-pic">
                                <img src="assets/images/ab2.jpg" alt="" class="img-fluid radius-image">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//w3-grids-->
	<div style="margin: 8px auto; display: block; text-align:center;">

<!---728x90--->

 
</div>
    <!-- features section -->
    <section class="w3l-features py-5" id="features">
        <div class="container py-lg-5 py-md-4 py-2">
            <div class="title-content text-center mb-lg-3 mb-4">
                <h6 class="title-subw3hny mb-1">What We Do</h6>
                <h3 class="title-w3l">We Help Build On Past & Prepare
                    For Your Future.</h3>
            </div>
            <div class="main-cont-wthree-2">
                <div class="row justify-content-center">
                    <div class="col-lg-4 col-md-6 mt-lg-5 mt-4">
                        <div class="grids-1 box-wrap">
                            <div class="icon">
                                <i class="fas fa-pen-fancy"></i>
                            </div>
                            <h4><a href="#service" class="title-head mb-3">Construction Manage</a></h4>
                            <p class="text-para">Lorem ipsum dolor sit amet, elit. Id ab commodi magnam. </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-lg-5 mt-4">
                        <div class="grids-1 box-wrap">
                            <div class="icon">
                                <i class="fas fa-layer-group"></i>
                            </div>
                            <h4><a href="#service" class="title-head mb-3">Architecture & Building</a></h4>
                            <p class="text-para">Lorem ipsum dolor sit amet, elit. Id ab commodi magnam. </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-lg-5 mt-4">
                        <div class="grids-1 box-wrap">
                            <div class="icon">
                                <i class="fas fa-luggage-cart"></i>
                            </div>
                            <h4><a href="#service" class="title-head mb-3">Owner's
                                    Representation</a></h4>
                            <p class="text-para">Lorem ipsum dolor sit amet, elit. Id ab commodi magnam. </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//features section -->
    <!--/progress-->
    <section class="w3l-servicesblock w3l-servicesblock1 py-5" id="progress">
        <div class="container py-lg-5 py-md-4 py-2">
            <div class="row">
                <div class="col-lg-6 align-self pe-lg-4">
                    <div class="progress-info info1">
                        <h6 class="progress-tittle">Mechanical <span class="">70%</span></h6>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped" role="progressbar" style="width:70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="progress-info info2">
                        <h6 class="progress-tittle">Construction <span class="">80%</span>
                        </h6>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped" role="progressbar" style="width:80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="progress-info info3">
                        <h6 class="progress-tittle">Power Energy <span class="">90%</span></h6>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-lg-6 mt-lg-0 mt-5 ps-lg-5">
                    <h5 class="title-subw3hny mb-1">Progress Bars</h5>
                    <h3 class="title-w3l">What We Serve To Industry</h3>
                    <p class="mt-md-4 mt-3">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo,
                        ultrices in ligula. Semper at. Lorem ipsum dolor sit amet
                        elit. Non quae, fugiat nihil ad. Lorem ipsum dolor sit amet. Lorem ipsum init
                        dolor sit, amet elit. Dolor ipsum non velit, culpa! elit ut et.</p>

                </div>
            </div>
        </div>
    </section>
    <!--//progress-->
	<div style="margin: 8px auto; display: block; text-align:center;">

<!---728x90--->
 
</div>
    <!--/team-sec-->
    <section class="w3l-team-main team py-5" id="team">
        <div class="container py-lg-5">
            <div class="title-content text-center mb-2">
                <h6 class="title-subw3hny mb-1">Our Team</h6>
                <h3 class="title-w3l">Who Worked With Us.</h3>
            </div>
            <div class="row team-row justify-content-center">
                <div class="col-lg-4 col-6 team-wrap mt-lg-5 mt-4">
                    <div class="team-member text-center">
                        <div class="team-img">
                            <img src="assets/images/team1.jpg" alt="" class="radius-image">
                            <div class="overlay-team">
                                <div class="team-details text-center">
                                    <div class="socials mt-20">
                                        <a href="#url">
                                            <span class="fab fa-facebook-f"></span>
                                        </a>
                                        <a href="#url">
                                            <span class="fab fa-twitter"></span>
                                        </a>
                                        <a href="#url">
                                            <span class="fab fa-linkedin-in"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="#url" class="team-title">Lawrence Petrie</a>
                        <p>Director</p>
                    </div>
                </div>
                <!-- end team member -->
                <div class="col-lg-4 col-6 team-wrap mt-lg-5 mt-4">
                    <div class="team-member text-center">
                        <div class="team-img">
                            <img src="assets/images/team2.jpg" alt="" class="radius-image">
                            <div class="overlay-team">
                                <div class="team-details text-center">
                                    <div class="socials mt-20">
                                        <a href="#url">
                                            <span class="fab fa-facebook-f"></span>
                                        </a>
                                        <a href="#url">
                                            <span class="fab fa-twitter"></span>
                                        </a>
                                        <a href="#url">
                                            <span class="fab fa-linkedin-in"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="#url" class="team-title">Jack Peters</a>
                        <p>Managing Director</p>
                    </div>
                </div>
                <!-- end team member -->
                <div class="col-lg-4 col-6 team-wrap mt-lg-5 mt-4">
                    <div class="team-member text-center">
                        <div class="team-img">
                            <img src="assets/images/team3.jpg" alt="" class="radius-image">
                            <div class="overlay-team">
                                <div class="team-details text-center">
                                    <div class="socials mt-20">
                                        <a href="#url">
                                            <span class="fab fa-facebook-f"></span>
                                        </a>
                                        <a href="#url">
                                            <span class="fab fa-twitter"></span>
                                        </a>
                                        <a href="#url">
                                            <span class="fab fa-linkedin-in"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="#url" class="team-title">Anna Phillips</a>
                        <p>Worker</p>
                    </div>
                </div>
                <!-- end team member -->
            </div>

        </div>
    </section>
    <!--//team-sec-->
	<div style="margin: 8px auto; display: block; text-align:center;">

<!---728x90--->
 
</div>
    <!--/Gallery-Section-->
    <section class="w3l-gallery" id="gallery">
        <div class="destionation-innf py-5">
            <div class="container py-lg-5 py-md-4 py-2 HomePageGallery">
                <div class="title-content text-center">
                    <h6 class="title-subw3hny text-center">Gallery</h6>
                    <h3 class="title-w3l mb-5 text-center">Latest Projects</h3>
                </div>
                <!--/grids-grids-->
                <ul class="gallery_agile">
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g1.jpg">
                                <img src="assets/images/g1.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g2.jpg">
                                <img src="assets/images/g2.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g3.jpg">
                                <img src="assets/images/g3.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>

                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g4.jpg">
                                <img src="assets/images/g4.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g5.jpg">
                                <img src="assets/images/g5.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g6.jpg">
                                <img src="assets/images/g6.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>

                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g7.jpg">
                                <img src="assets/images/g7.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g8.jpg">
                                <img src="assets/images/g8.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="w3_agile_portfolio_grid">
                            <a href="assets/images/g9.jpg">
                                <img src="assets/images/g9.jpg" alt=" " class="img-fluid radius-image" />
                                <div class="w3layouts_news_grid_pos">
                                    <div class="wthree_text">
                                        <h3>Factorship</h3>
                                        <p>Lorem Ipsum</p>
                                    </div>
                                </div>
                            </a>
                        </div>

                    </li>
                </ul>
                <!--//rids-grids-->
            </div>
        </div>
    </section>
    <!--//Gallery-Section-->
    <!--/w3-grids-->
    <section class="w3l-passion-mid-sec py-5">
        <div class="container py-md-5 py-3">
            <div class="container">
                <div class="row w3l-passion-mid-grids">
                    <div class="col-lg-6 passion-grid-item-info pe-lg-5 mb-lg-0 mb-5">
                        <h6 class="title-subw3hny mb-1">What We Offer</h6>
                        <h3 class="title-w3l mb-4">We Work With You For Solution</h3>
                        <p class="mt-3 pe-lg-5">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo, ultrices in
                            ligula. Semper at tempufddfel.Lorem ipsum dolor sit, amet consectetur elit. Earum mollitia
                            cum ex ipsam autem!earum sequi amet.</p>
                        <div class="w3banner-content-btns">
                            <a href="about.html" class="btn btn-style btn-primary mt-lg-5 mt-4 me-2">Read More <i class="fas fa-angle-double-right ms-2"></i></a>
                            <a href="contact.html" class="btn btn-style btn-outline-dark mt-lg-5 mt-4">Services <i class="fas fa-angle-double-right ms-2"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-6 passion-grid-item-info">
                        <img src="assets/images/g3.jpg" alt="" class="img-fluid radius-image">
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--//w3-grids-->

    <!--/w3l-subscribe-content-->
    <section class="w3l-join-main py-5" id="join">
        <div class="container py-md-5">
            <div class="w3l-project-in">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="bottom-info">
                            <div class="header-section pe-lg-5">
                                <h5 class="title-subw3hny mb-2">Join With Us</h5>
                                <h3 class="title-w3l two mb-2">Stay Update!
                                </h3>
                                <p>We appreciate your trust greatly! Our clients choose us and our products because they know we’re the best.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 w3l-subscribe-content align-self mt-lg-0 mt-5">
                        <form action="#" method="post" class="subscribe-wthree">
                            <div class="flex-wrap subscribe-wthree-field">
                                <input class="form-control" type="email" placeholder="Email" name="email" required="">
                                <button class="btn btn-style btn-primary" type="submit">Subscribe</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//w3l-subscribe-content-->
    <!--/testimonials-->
    <section class="w3l-testimonials" id="testimonials">
        <!-- /grids -->
        <div class="cusrtomer-layout py-5">
            <div class="container py-lg-4 py-md-3 py-2 pb-lg-0">

                <div class="title-content text-center">
                    <h6 class="title-subw3hny">Testimonials</h6>
                    <h3 class="title-w3l mb-5">Reviews of
                        our Clients</h3>
                </div>
                <!-- /grids -->
                <div class="testimonial-width pt-lg-4">
                    <div id="owl-demo1" class="owl-two owl-carousel owl-theme">
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="testimonial">
                                    <div class="test-img"><img src="assets/images/team1.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <blockquote>
                                        <i class="fas fa-quote-right"></i>
                                        <q>Lorem ipsum dolor sit amet elit. Velit beatae
                                            laudantium
                                            voluptate rem ullam dolore nisi voluptatibus esse quasi, doloribus
                                            tempora.</q>
                                    </blockquote>
                                    <div class="testi-des">
                                        <div class="peopl align-self">
                                            <h3>John wilson</h3>
                                            <p class="indentity">Example City</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="testimonial">
                                    <div class="test-img"><img src="assets/images/team2.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <blockquote>
                                        <i class="fas fa-quote-right"></i>
                                        <q>Lorem ipsum dolor sit amet elit. Velit beatae
                                            laudantium
                                            voluptate rem ullam dolore nisi voluptatibus esse quasi, doloribus
                                            tempora.</q>
                                    </blockquote>
                                    <div class="testi-des">
                                        <div class="peopl align-self">
                                            <h3>Julia sakura</h3>
                                            <p class="indentity">Example City</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="testimonial">
                                    <div class="test-img"><img src="assets/images/team3.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <blockquote>
                                        <i class="fas fa-quote-right"></i>
                                        <q>Lorem ipsum dolor sit amet elit. Velit beatae
                                            laudantium
                                            voluptate rem ullam dolore nisi voluptatibus esse quasi, doloribus
                                            tempora.</q>
                                    </blockquote>
                                    <div class="testi-des">
                                        <div class="peopl align-self">
                                            <h3>Roy Linderson</h3>
                                            <p class="indentity">Example City</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="testimonial">
                                    <div class="test-img"><img src="assets/images/team2.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <blockquote>
                                        <i class="fas fa-quote-right"></i>
                                        <q>Lorem ipsum dolor sit amet elit. Velit beatae
                                            laudantium
                                            voluptate rem ullam dolore nisi voluptatibus esse quasi, doloribus
                                            tempora.</q>
                                    </blockquote>
                                    <div class="testi-des">
                                        <div class="peopl align-self">
                                            <h3>Smith Johnson</h3>
                                            <p class="indentity">Example City</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="testimonial">
                                    <div class="test-img"><img src="assets/images/team3.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <blockquote>
                                        <i class="fas fa-quote-right"></i>
                                        <q>Lorem ipsum dolor sit amet elit. Velit beatae
                                            laudantium
                                            voluptate rem ullam dolore nisi voluptatibus esse quasi, doloribus
                                            tempora.</q>
                                    </blockquote>
                                    <div class="testi-des">
                                        <div class="peopl align-self">
                                            <h3>John wilson</h3>
                                            <p class="indentity">Example City</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="testimonial">
                                    <div class="test-img"><img src="assets/images/team1.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <blockquote>
                                        <i class="fas fa-quote-right"></i>
                                        <q>Lorem ipsum dolor sit amet elit. Velit beatae
                                            laudantium
                                            voluptate rem ullam dolore nisi voluptatibus esse quasi, doloribus
                                            tempora.</q>
                                    </blockquote>
                                    <div class="testi-des">
                                        <div class="peopl align-self">
                                            <h3>Julia sakura</h3>
                                            <p class="indentity">Example City</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="testimonial-content">
                                <div class="testimonial">
                                    <div class="test-img"><img src="assets/images/team3.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <blockquote>
                                        <i class="fas fa-quote-right"></i>
                                        <q>Lorem ipsum dolor sit amet elit. Velit beatae
                                            laudantium
                                            voluptate rem ullam dolore nisi voluptatibus esse quasi, doloribus
                                            tempora.</q>
                                    </blockquote>
                                    <div class="testi-des">
                                        <div class="peopl align-self">
                                            <h3>Roy Linderson</h3>
                                            <p class="indentity">Example City</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /grids -->
        </div>
        <!-- //grids -->
    </section>
    <!--//testimonials-->
    <!--/w3l-subscribe-content-->
    <section class="w3l-join-main py-5">
        <div class="container py-md-5">
            <div class="w3l-project-in">
                <div class="row">
                    <div class="col-lg-4 col-12">
                        <div class="bottom-info">
                            <div class="header-section pe-lg-5">
                                <h5 class="title-subw3hny mb-lg-2">Industrial </h5>
                                <h3 class="title-w3l two mb-2">Services For Your Business
                                </h3>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 align-self mt-lg-0 mt-3">
                        <p>Lorem ipsum viverra feugiat. Pellen tesque libero ut justo, ultrices in ligula. Semper at. Lorem ipsum dolor sit amet elit. Non quae, fugiat nihil ad. Lorem ipsum dolor sit amet. </p>
                    </div>
                    <div class="col-lg-4 col-md-6 align-self mt-lg-0 mt-3">
                        <p>Lorem ipsum viverra feugiat. Pellen tesque libero ut justo, ultrices in ligula. Semper at. Lorem ipsum dolor sit amet elit. Non quae, fugiat nihil ad. Lorem ipsum dolor sit amet. </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//w3l-subscribe-content-->
    <!-- contact-form -->
    <section class="w3l-contact-main" id="contact">
        <div class="contact-infhny py-5 pb-0">
            <div class="container py-lg-3 pb-0">
                <div class="top-map">
                    <div class="map-content-9">
                        <form action="#" method="post">
                            <div class="form-top1">
                                <div class="w3header-section text-center">
                                    <h6 class="title-subw3hny">Get In Touch </h6>
                                    <h3 class="title-w3l mb-0">
                                        Fill the form and send your query</h3>
                                    <p class="mb-lg-5 mb-4 text-center">We have made it easy for clients to reach us and
                                        get
                                        their solutions
                                        weaved</p>
                                </div>

                                <div class="form-top">
                                    <div class="form-top-left">
                                        <input type="text" name="w3lName" id="w3lName" placeholder="Name" required="">
                                        <input type="number" name="w3lPhone" placeholder="Your phone number" required="">
                                        <input type="email" name="w3lSender" id="w3lSender" placeholder="Email*" required="">
                                        <input type="text" name="w3lSubject" id="w3lName" placeholder="Subject" required="">
                                    </div>
                                    <div class="form-top-righ">
                                        <textarea name="w3lMessage" id="w3lMessage" placeholder="Message*" required=""></textarea>
                                    </div>
                                </div>
                                <div class="text-lg-right text-center">
                                    <button type="submit" class="btn btn-style btn-primary">Submit Now <i class="fas fa-paper-plane ms-2"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //contact-form -->
    <!-- contact-form -->
    <section class="w3l-contact-main py-5" id="contact2">
        <div class="container py-md-4 py-3">
            <div class="w3l-contact-info top-map">
                <div class="row contact-infos justify-content-center">
                    <div class="col-lg-4 col-md-6">
                        <div class="single-contact-infos">
                            <div class="icon-box"> <span class="fas fa-map-marked-alt"></span></div>
                            <div class="text-box">
                                <h3 class="mb-2">Our Location</h3>
                                <p>Factorship,808 Services, #21st street, NY - 62617.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="single-contact-infos">
                            <div class="icon-box"> <span class="fas fa-phone-alt"></span></div>
                            <div class="text-box">
                                <h3 class="mb-2">Give us a call</h3>
                                <p><a href="tel:+12 404-11-22-89">+12 404-11-22-89</a></p>
                                <p><a href="tel:+12 404-11-22-99">+12 404-11-22-99</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-lg-0 mt-4">
                        <div class="single-contact-infos">
                            <div class="icon-box"> <span class="fas fa-envelope-open-text"></span></div>
                            <div class="text-box">
                                <h3 class="mb-2">Help Desk</h3>
                                <p> company@gmail.com</p>
                                <p> support@gmail.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- contact map -->
    <section class="w3l-contact-main" id="contact">
        <div class="map">
            <iframe src="https://www.amap.com/" sandbox="" allowfullscreen=""></iframe>
        </div>
    </section>
    <!-- //contact map -->
    <!--/footer-9-->
    <footer class="w3l-footer9">
        <section class="footer-inner-main py-5">
            <div class="container py-md-3">
                <div class="right-side">
                    <div class="row footer-hny-grids sub-columns">
                        <div class="col-lg-3 sub-one-left">
                            <h6>About </h6>
                            <p class="footer-phny pe-lg-5">Since 1960,. has built a reputation for producing high quality precision fabricated products for use in a variety of industries.</p>
                            <div class="columns-2 mt-lg-5 mt-4">
                                <ul class="social">
                                    <li><a href="#facebook"><span class="fab fa-facebook-f"></span></a>
                                    </li>
                                    <li><a href="#linkedin"><span class="fab fa-linkedin-in"></span></a>
                                    </li>
                                    <li><a href="#twitter"><span class="fab fa-twitter"></span></a>
                                    </li>
                                    <li><a href="#google"><span class="fab fa-google-plus-g"></span></a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-3 sub-two-right">
                            <h6>Services</h6>
                            <ul>
                                <li><a href="#processing"><i class="fas fa-angle-right"></i> Agriculture Processing</a>
                                </li>
                                <li><a href="#research"><i class="fas fa-angle-right"></i> Chemical Research</a>
                                </li>
                                <li><a href="#metal"><i class="fas fa-angle-right"></i> Metal Engineering</a>
                                </li>
                                <li><a href="#gas"><i class="fas fa-angle-right"></i> Petroleum & Gas</a>
                                </li>
                                <li><a href="#work"><i class="fas fa-angle-right"></i> Mechanical Engineering</a></li>


                            </ul>
                        </div>
                        <div class="col-lg-3 sub-two-right">
                            <h6>Our Links</h6>
                            <ul>

                                <li><a href="#why"><i class="fas fa-angle-right"></i> Why us</a>
                                </li>
                                <li><a href="#licence"><i class="fas fa-angle-right"></i> Licensing
                                    </a>
                                </li>
                                <li><a href="#log"><i class="fas fa-angle-right"></i> Offers
                                    </a></li>
                                <li><a href="#log"><i class="fas fa-angle-right"></i> Changelog
                                    </a></li>
                                <li><a href="#career"><i class="fas fa-angle-right"></i> Careers</a></li>

                            </ul>
                        </div>
                        <div class="col-lg-3 sub-one-left">
                            <h6>Recent Posts </h6>
                            <div class="row fposts-grid-inner mb-4">
                                <div class="col-4 fposts-grid-left ps-0">
                                    <a href="blog-single.html">
                                        <img src="assets/images/g2.jpg" alt=" " class="img-fluid radius-image">
                                    </a>
                                </div>
                                <div class="col-8 fposts-grid-right">
                                    <h4>
                                        <a href="#home" class="text-bl text-left">Lorem ipsum viverra feugiat libero.</a>
                                    </h4>
                                    <p class="time"> 11 Minutes ago</p>
                                </div>
                            </div>
                            <div class="row fposts-grid-inner mb-4">
                                <div class="col-4 fposts-grid-left ps-0">
                                    <a href="blog-single.html">
                                        <img src="assets/images/g3.jpg" alt=" " class="img-fluid radius-image">
                                    </a>
                                </div>
                                <div class="col-8 fposts-grid-right">
                                    <h4>
                                        <a href="#home" class="text-bl text-left">Lorem ipsum viverra feugiat libero.</a>
                                    </h4>
                                    <p class="time"> 11 Minutes ago</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="below-section mt-5">
                    <div class="copyright-footer">
                        <div class="columns text-left">
                            <p>© Factorship. All rights reserved.All rights reserved. <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
                        </div>
                        <ul class="footer-w3list text-right">
                            <li><a href="#url">Privacy Policy</a>
                            </li>
                            <li><a href="#url">Terms &amp; Conditions</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </section>

        <!-- Js scripts -->
        <!-- move top -->
        <button onclick="topFunction()" id="movetop" title="Go to top">
            <span class="fas fa-level-up-alt" aria-hidden="true"></span>
        </button>
        <script>
            // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function() {
                scrollFunction()
            };

            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("movetop").style.display = "block";
                } else {
                    document.getElementById("movetop").style.display = "none";
                }
            }

            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }

        </script>
        <!-- //move top -->
    </footer>
    <!--//footer-9 -->

    <!-- Template JavaScript -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/theme-change.js"></script>
    <!--light-box-files -->
    <script src="assets/js/jquery-2.1.4.min.js"></script>
    <script src="assets/js/jquery.chocolat.js"></script>
    <script type="text/javascript ">
        $(function() {
            $('.w3_agile_portfolio_grid a').Chocolat();
        });

    </script>
    <!-- /js for portfolio lightbox -->
    <!-- stats number counter-->
    <script src="assets/js/jquery.waypoints.min.js"></script>
    <script src="assets/js/jquery.countup.js"></script>
    <script>
        $('.counter').countUp();

    </script>
    <!-- //stats number counter -->
    <!-- owlcarousel -->
    <script src="assets/js/owl.carousel.js"></script>
    <!-- script for banner slider-->
    <script>
        $(document).ready(function() {
            $('.owl-one').owlCarousel({
                loop: true,
                margin: 0,
                nav: false,
                responsiveClass: true,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplaySpeed: 1000,
                autoplayHoverPause: false,
                responsive: {
                    0: {
                        items: 1
                    },
                    480: {
                        items: 1
                    },
                    667: {
                        items: 1
                    },
                    1000: {
                        items: 1
                    }
                }
            })
        })

    </script>
    <!-- //script -->
    <!-- script for tesimonials carousel slider -->
    <script src="assets/js/owl.carousel.js"></script>

    <script>
        $(document).ready(function() {
            $("#owl-demo1").owlCarousel({
                loop: true,
                margin: 20,
                nav: false,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 1,
                        nav: false
                    },
                    768: {
                        items: 2,
                        nav: false
                    },
                    1000: {
                        items: 3,
                        nav: false,
                        loop: false
                    }
                }
            })
        })

    </script>
    <!-- //script for tesimonials carousel slider -->
    <!-- video popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',

                fixedContentPos: false,
                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,
                preloader: false,

                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });

            $('.popup-with-move-anim').magnificPopup({
                type: 'inline',

                fixedContentPos: false,
                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,
                preloader: false,

                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-slide-bottom'
            });
        });

    </script>
    <!-- //video popup -->
    <!--/search-->
    <script src="assets/js/modernizr.custom.js"></script>
    <script src="assets/js/classie.js"></script>
    <script src="assets/js/demo1.js"></script>
    <!--//search-->
    <!-- MENU-JS -->
    <script>
        $(window).on("scroll", function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 80) {
                $("#site-header").addClass("nav-fixed");
            } else {
                $("#site-header").removeClass("nav-fixed");
            }
        });

        //Main navigation Active Class Add Remove
        $(".navbar-toggler").on("click", function() {
            $("header").toggleClass("active");
        });
        $(document).on("ready", function() {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
            $(window).on("resize", function() {
                if ($(window).width() > 991) {
                    $("header").removeClass("active");
                }
            });
        });

    </script>
    <!-- //MENU-JS -->

    <!-- disable body scroll which navbar is in active -->
    <script>
        $(function() {
            $('.navbar-toggler').click(function() {
                $('body').toggleClass('noscroll');
            })
        });

    </script>
    <!-- //disable body scroll which navbar is in active -->
    <!-- //bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>


</body>

</html>
